<template>
	<!-- 20220215 -->
	<view class="mall-spike-detail-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">


			<!-- 产品可以浏览 -->
			<view class="" v-if="detail.id && loadFinish">

				<!-- 返回和分享 固定在顶部 -->
				<view class="jc-header">

					<!-- #ifdef APP-PLUS -->
					<view class="height-status-bar"></view>
					<!-- #endif -->

					<!-- app端无标题，定位在status-bar下  -->
					<view class="width-100p flex align-center justify-between" style="padding:14rpx 30rpx;">

						<!-- 返回 -->
						<view>
							<!-- #ifdef APP-PLUS -->
							<view class="radius-50p text-center"
								style="width: 60rpx; height: 60rpx; background: rgba(170, 170, 170, 0.5);"
								@click="go(1,4)">
								<text class="tyIcon-arrow-left line-60 text-44 text-ff"></text>
							</view>
							<!-- #endif -->
						</view>

						<!-- 分享 -->
						<!-- #ifdef APP-PLUS|H5 -->
						<view v-if="!isWeixinEnv">
							<view class="radius-50p text-center"
								style="width: 60rpx; height: 60rpx; background: rgba(170, 170, 170, 0.5);"
								@click="isShareLayerShow = true">
								<text class="tyIcon-share-1 line-60 text-44 text-ff"></text>
							</view>
						</view>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share">
							<view class="radius-50p text-center"
								style="width: 60rpx; height: 60rpx; background: rgba(170, 170, 170, 0.5);">
								<text class="tyIcon-share-1 line-60 text-44 text-ff"></text>
							</view>
						</button>
						<!-- #endif -->
					</view>
				</view>


				<!-- 轮播图 -->
				<view class="swiper-block">
					<ty-swiper-detail :list="detail.carousel"></ty-swiper-detail>
				</view>

				<!-- 商品信息 -->
				<view class="height-120 flex bg-main-light">
					<!-- 商品名称价钱销量 -->
					<view class="padding-left-30 bg-main text-ff flex flex-direction justify-center"
						style="width: 540rpx; border-radius: 0 6rpx 6rpx 0;">
						<!-- 价钱 -->
						<view class="text-40 text-bold">
							<text v-if="detail.price_min == detail.price_max">¥{{detail.price_min}}</text>
							<text v-if="detail.price_min != detail.price_max">
								¥{{detail.price_min}}-¥{{detail.price_max}}
							</text>
						</view>

						<view class="">
							<!-- 原价 -->
							<text class="text-24 text-through">¥{{detail.price_original}}</text>
							<!-- 限量 -->
							<text class="margim-left-30 text-24">限量{{detail.number}}件</text>
						</view>
					</view>

					<!-- 场次信息 -->
					<view class="flex-one flex flex-direction justify-center">
						<view class="text-center text-20 text-main" v-if="detail.status == 2">距开始还剩</view>
						<view class="text-center text-20 text-main" v-if="detail.status == 1">距结束还剩</view>

						<view class="margin-top-10 flex align-center justify-center">
							<view class="padding-lr-5 line-height-50 radius-6 bg-main text-28 text-bold text-ff">
								{{countDown.hour}}
							</view>
							<view class="margin-lr-5 text-24 text-main">:</view>
							<view class="padding-lr-5 line-height-50 radius-6 bg-main text-28 text-bold text-ff">
								{{countDown.minute}}
							</view>
							<view class="margin-lr-5 text-24 text-main">:</view>
							<view class="padding-lr-5 line-height-50 radius-6 bg-main text-28 text-bold text-ff">
								{{countDown.second}}
							</view>
						</view>
					</view>
				</view>

				<view class="padding-lr-30 padding-tb-30 bg-ff">
					<!-- 标题 -->
					<text class="text-34 text-bold">{{detail.name}}</text>
					<view class="margin-top-20 text-26 text-aa">
						已售{{detail.sales_number}}
					</view>
				</view>

				<!-- 服务保障 -->
				<view class="" v-if="detail.mallAttach.length">
					<!-- 组件内容 -->
					<view class="padding-lr-30 height-80 flex align-center bg-main-light"
						v-if="detail.mallAttach.length" @click="isShowAttachServiceLayer = true">

						<text class="line-height-80 text-24 text-main text-bold">保障</text>

						<view class="margin-left-40 line-height-80 flex-one text-cut-one">
							<block v-for="(item,index) in detail.mallAttach" :key="index">
								<text class="margin-lr-15 text-24 text-main" v-if="index > 0">•</text>
								<text class="text-24 text-main">{{item.name}}</text>
							</block>
						</view>

						<text class="tyIcon-arrow-right margin-left-20 line-height-80 text-24 text-main"></text>
					</view>
				</view>

				<!-- 评价板块 -->
				<view class="margin-top-20 bg-ff">
					<!-- 有评价时 -->
					<view class="padding-top-25 padding-bottom-30" v-if="evaluateList.total">
						<!-- 标题 -->
						<view class="padding-lr-30 flex align-center">
							<text class="line-height-50 text-34 text-bold">商品评价</text>
							<text class="margin-left-10 line-height-50 text-26 text-main">
								{{evaluateList.total}}
							</text>
						</view>

						<!-- 评价 -->
						<view class="">
							<jc-mall-evaluate :evaluate-data="evaluateList.data[0]" :is-show-reply="false"
								:is-show-add-evaluate="false">
							</jc-mall-evaluate>
						</view>

						<!-- 按钮 -->
						<view
							class="margin-top-10 block-center width-220 height-60 radius-30 border-ed text-center text-24 text-77"
							style="line-height: 56rpx;"
							@click="go('/pages/mall/evaluateList?type=1&id=' + detail.product_id)">
							查看全部评价
						</view>
					</view>

					<!-- 无评价时 -->
					<view class="padding-lr-30 line-height-100 bg-ff flex align-center justify-between" v-else>
						<text class="text-34 text-bold">商品评价</text>
						<text class="text-28 text-aa">暂时还没有评价哦～</text>
					</view>
				</view>

				<!-- 商品详情 -->
				<view>
					<view class="line-height-80 flex align-center justify-center">
						<view class="border-line"></view>
						<text class="margin-lr-30 text-28 text-4d">商品详情</text>
						<view class="border-line"></view>
					</view>

					<!-- 富文本 -->
					<view class="padding-top-30 padding-bottom-20 padding-lr-30 bg-ff" v-if="detail.description">
						<ty-text-rich-text :html="detail.description"></ty-text-rich-text>
					</view>
				</view>
			</view>

			<view class="padding-top-30 padding-bottom-50" v-else-if="!detail.id && loadFinish">
				<ty-text-no-data text="商品已过期或已删除" @btnClick="go('/pages/mall/spike/list')"></ty-text-no-data>
			</view>

			<!-- 底部条 -->
			<view class="jc-footer-safe bg-ff"  v-if="detail.id && loadFinish">
				<!-- 已开场可购买 -->
				<view class="line-height-footer bg-main text-center text-28 text-bold text-ff" @tap="skuShow"
					v-if="detail.status == 1 && detail.sales_number < detail.number">
					立即购买
				</view>
				<!-- 已开场不可购买 -->
				<view class="line-height-footer bg-1a text-center text-28 text-bold text-aa" style="opacity: 0.8;"
					v-if="detail.status == 1 && detail.sales_number >= detail.number">
					已抢光
				</view>
				<!-- 未开场且未预约 -->
				<view class="line-height-footer bg-main text-center text-28 text-bold text-ff" @tap="notice"
					v-if="detail.status == 2 && detail.has_appoint_notice == 0">
					抢购提醒
				</view>
				<!-- 未开场且已预约 -->
				<view class="line-height-footer bg-main text-center text-28 text-bold text-ff" style="opacity: 0.5;" @tap="noticeCancel"
					v-if="detail.status == 2 && detail.has_appoint_notice == 1">
					取消提醒
				</view>
			</view>

			<!-- 返回顶部和返回首页 -->
			<view class="btn-block">
				<ty-text-top-home :scroll-top="scrollTop" @homeClick="go('/pages/mall/spike/list')"></ty-text-top-home>
			</view>

		</view>

		<view class="page-layer">
			<!-- 分享浮层 -->
			<ty-layer-share :show.sync="isShareLayerShow" :title="share.title" :href="share.href"
				:image-url="share.image_url"></ty-layer-share>

			<!-- 规格弹出框 -->
			<ty-layer-sku :product.sync="detail" :show.sync="isSkuLayerShow" :type="skuBtnType" @confirm="confirm">
			</ty-layer-sku>

			<!-- 抢购提醒浮层 -->
			<jc-mall-noticeLayer :show.sync="isNoticeLayerShow" :minute="noticeMinute"></jc-mall-noticeLayer>

			<!-- 服务保障浮层 -->
			<ty-layer-attach-service :list="detail.mallAttach" :show.sync="isShowAttachServiceLayer">
			</ty-layer-attach-service>

			<!-- 登录浮层 -->
			<ty-register-login :show.sync="isRegisterLayerShow" :agree.sync="isRegisterAgree">
				<!-- #ifdef APP-PLUS -->
				<view class="bg-ff">
					<!-- 占位 view，避免页面内容出现在状态栏 -->
					<view class="height-status-bar"></view>
				</view>
				<!-- #endif -->
			</ty-register-login>
		</view>
	</view>
</template>

<script>
	import mall from '../api/mall.js'
	export default {
		data() {
			return {
				// 秒杀ID
				spikeId: '',
				// 商品详情
				detail: {
					mallAttach: []
				},
				// 评论 显示单条
				evaluateList: {},
				// 购买方式 1--加入购物车 2--立即购买
				buyType: 2,
				// 是否加载完商品详情
				loadFinish: false,
				// 分享内容
				share: {},

				// 服务保障浮层是否显示
				isShowAttachServiceLayer: false,
				// 分享浮层是否显示
				isShareLayerShow: false,
				// 规格浮层是否显示
				isSkuLayerShow: false,
				// SKU按钮加载样式 1--显示1个按钮 确定 2--显示2个按钮 加入购物车和立即购买
				skuBtnType: 1,
				// 是否显示抢购提醒浮层
				isNoticeLayerShow: false,
				// 秒杀产品前X分钟提醒
				noticeMinute: '',
				// 滑动距离
				scrollTop: 0,
				// 场次计时器
				productIntervalTimer: {},
				// 倒计时时间
				countDown: {
					hour: '00',
					second: '00',
					minute: '00'
				},
				// 注册浮层是否显示
				isRegisterLayerShow: false,
				// 注册浮层是否选中用户协议
				isRegisterAgree: false,
				// 是否是微信公众号，该环境不显示分享按钮
				isWeixinEnv: false,

			}
		},

		onLoad(options) {
			this.spikeId = options.id || 0
		},

		onReady() {
			if (this.cn.userAgent() == 'weixin') {
				this.isWeixinEnv = true
			}

			// 加载秒杀商品详情
			this.getDetail()

			// 商品评论
			this.getEvaluate()

			// 获取秒杀基础设置
			this.getConfig()
		},

		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			return {
				title: this.share.title,
				path: '/pages/mall/spike/detail?id=' + this.spikeId
			}
		},
		// #endif

		onUnload() {
			clearInterval(this.productIntervalTimer)
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},

		methods: {
			/**
			 * 加载秒杀商品详情
			 * @date 2023-02-15
			 */
			getDetail() {
				mall.spike.getProduct(this.spikeId).then(res => {
					this.loadFinish = true
					this.detail = res.data.detail
					this.share = res.data.share

					if (this.detail.id) {

						// 微信公众号分享
						if (this.cn.userAgent() == 'weixin') {
							this.wx.share({
								title: this.share.title,
								desc: this.share.title,
								link: this.share.href,
								imgUrl: this.share.image_url
							})
						}
					}

					//场次倒计时
					this.timeCountDown()
				})
			},

			/**
			 * 获取商品评论
			 * @date 2023-02-15
			 */
			getEvaluate() {
				mall.evaluate.listOneEvaluate(this.spikeId).then(res => {
					if (res.code == 0) {
						this.evaluateList = res.data.evaluate_list
					}
				})
			},

			// 获取秒杀基础设置
			getConfig() {
				mall.config.getSpikeConfig().then(res => {
					if (res.code == 0) {
						this.noticeMinute = res.data.notice_minute
					}
				})
			},

			/**
			 * 场次倒计时
			 * @date 2023-02-16
			 */
			timeCountDown() {
				let spaceTime = this.detail.space_time

				this.productIntervalTimer = setInterval(res => {
					if (spaceTime > 0) {
						let time = this.cn.timeSplit(spaceTime, 3)
						this.countDown.hour = time.hour
						this.countDown.minute = time.minute
						this.countDown.second = time.second
							--spaceTime
					} else {
						clearInterval(this.productIntervalTimer)

						//重新加载产品
						this.getDetail()
					}
				}, 1000)
			},

			// 点击显示SKU浮层
			skuShow(e) {
				// 没有登录先登录
				if (!this.cn.isLogin()) {
					this.isRegisterLayerShow = true
					return false
				}

				this.isSkuLayerShow = true
				this.type = 1
			},

			//确认下单
			confirm(e) {
				if (this.detail.is_spec_open == 0 && this.detail.stock == 0) {
					this.cn.toast('库存不足啦!')
					return false
				}

				this.buyType = 2
				// 加入购物车(无此方式）
				if (this.buyType == 1) {
					// 立即购买
				} else if (this.buyType == 2) {
					uni.navigateTo({
						url: '/pages/mall/order?type=2&buy_type=2&product_id=' +
							this.detail.product_id + '&sku=' +
							e.choose_sku + '&number=' + e.buy_number + '&spike_product_id=' + this.spikeId
					})
				}
			},

			/**
			 * 设置提醒
			 * @date 2023-02-17
			 */
			notice() {
				// 没有登录先登录
				if (!this.cn.isLogin()) {
					this.isRegisterLayerShow = true
					return false
				}

				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['j9k-hnY1zJFQKmQ_NermXgt0DC--qPjKnERvf0uAC-o'],
					success: (res) => {
						console.log(res)
						if (res['j9k-hnY1zJFQKmQ_NermXgt0DC--qPjKnERvf0uAC-o'] == 'accept') {
							mall.spike.insertNotice(this.spikeId).then(res => {
								if (res.code == 0) {
									this.isNoticeLayerShow = true
									this.detail.has_appoint_notice = 1
								}
							})
						}
					}
				})
				// #endif

				// #ifndef MP-WEIXIN
				// TODO 判断有没有权限 没有权限跳转权限设置页 有权限去预约		
				mall.spike.insertNotice(this.spikeId).then(res => {
					if (res.code == 0) {
						this.isNoticeLayerShow = true
						this.detail.has_appoint_notice = 1
					}
				})
				// #endif
			},

			/**
			 * 取消提醒
			 * @date 2023-02-16
			 */
			noticeCancel() {
				mall.spike.cancelNotice(this.spikeId).then(res => {
					if (res.code == 0) {
						this.detail.has_appoint_notice = 0
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 轮播图 */
	.swiper-block {
		width: 750rpx;
		height: 750rpx;
	}

	/* 商品详情 */
	.border-line {
		width: 60rpx;
		height: 1rpx;
		background: #ccc;
	}

	/* 返回顶部和返回首页 */
	.btn-block {
		position: fixed;
		bottom: calc(var(--window-bottom) + 98rpx + 40rpx);
		right: 30rpx;
	}
</style>